<template>
  <div class="base-container" id="main">
    <div style="display: flex;justify-content: center;font-size: 50px;padding: 30px">标准意见</div>
    <t-form  ref="form" :data="queryParams" label-width="80" @submit="()=>{this.pagination.current=1;this.queryParams.pageNum=1;this.getList()}" @reset="()=>{this.pagination.current=1;this.queryParams.pageNum=1;this.getList()}">
      <t-row style="border-bottom: 1px solid #E5E6EB;margin-bottom: 10px;">
        <t-col :span="11" class="query-form-inline">
          <t-form-item label="标准名称" name="projectName">
            <t-input
              v-model="queryParams.projectName"
              clearable
              placeholder="请输入标准名称"
              style="width: 240px"
            />
          </t-form-item>
          <t-form-item label="制定或修订" name="formulateType">
            <t-select style="width: 240px" clearable v-model="queryParams.formulateType"
                      :options="[]">
            </t-select>
          </t-form-item>
        </t-col>
        <t-col :span="1" class="operation-container">
          <t-button theme="primary" type="submit"> 查询</t-button>
          <t-button theme="default" variant="outline" type="reset">重置</t-button>
        </t-col>
      </t-row>
    </t-form>
    <!--    <div class="btn-group-inline">-->
    <!--      <t-button @click="apply" variant="outline" theme="primary">-->
    <!--        <t-icon name="add" slot="icon"/>-->
    <!--        新增-->
    <!--      </t-button>-->
    <!--    </div>-->
    <t-table rowKey="index" :data="data" :columns="columns" hover :pagination="pagination"
             :loading="dataLoading" :sort="sort" :hideSortTips="true" @sort-change="sortChange" multipleSort >
      <template #projectName="{ row }">
        <t-link @click="openDetail(row)" hover="color" theme="primary">{{ row.projectName }}</t-link>
      </template>
      <template #formulateType="{ row }">
<!--        {{ row.formulateType | filterByDict(dict.type.formulate_type) }}-->
      </template>
      <template #manageDeptId="{ row }">
<!--        {{ row.manageDeptId | filterByTree(deptMenuOptions) }}-->
      </template>
      <template #standardProperty="{ row }">
        {{ row.standardProperty | filterByDict(dict.type.standard_property) }}
      </template>
      <template #reviseNum="{ row }">
        {{row.reviseNum || "-"}}
      </template>
      <template #consistencyDegree="{ row }">
        {{row.consistencyDegree || "-"}}
      </template>
      <template #internationalStandardNum="{ row }">
        {{row.internationalStandardNum || "-"}}
      </template>
      <template #op="{ row }">
        <t-button size="small" @click="openDetail(row)" variant="text" class="t-button-link">
          <t-icon name="info-circle" slot="icon"/>
          详情
        </t-button>
        <t-button size="small" @click="opinionVisible = true; header = row.projectName; nowRow = row" variant="text"
                  class="t-button-link">
          <t-icon name="edit-1" slot="icon" />
          评价
        </t-button>
      </template>
    </t-table>
    <t-dialog :visible.sync="opinionVisible" top="5%" :confirmBtn="null" width="60%" :header="header"
              :cancelBtn="null">
     <div style="height: 65vh;">
       <t-form ref="form" @submit="onSubmit" labelWidth="160px" :rules="rules" :data="formData">
         <t-form-item label="地方标准章条编号：" name="chapterNum">
           <t-input v-model="formData.chapterNum" placeholder="请输入地方标准章条编号" />
         </t-form-item>
         <t-form-item label="意见内容：" name="opinion">
           <t-textarea v-model="formData.opinion" :autosize="{ minRows: 5 }" placeholder="请输入您的意见" />
         </t-form-item>
         <t-form-item label="您的名字：" name="personName">
           <t-input v-model="formData.personName" placeholder="请输入您的名字" />
         </t-form-item>
         <t-form-item label="您的单位名：" name="deptName">
           <t-input v-model="formData.deptName" placeholder="请输入您的单位名" />
         </t-form-item>
       </t-form>
     </div>
      <template #footer>
                     <t-button theme="default" variant="outline" type="reset" @click="opinionVisible = false">取消</t-button>
                     <t-button theme="primary"  @click="onSubmit"> 提交</t-button>
      </template>
    </t-dialog>
    <t-dialog :visible.sync="dialog.open_detail" top="5%" :confirmBtn="null" width="80%" :header="dialog.header"
              :cancelBtn="null">
     <div style="height: 65vh;">
       <t-tabs v-model="value" size="medium">
         <t-tab-panel class="tab-panel"  value="1" label="基本信息">
           <t-form labelWidth="120px" :colon="true">
             <t-row style="align-items: stretch" :gutter="14">
               <t-col :span="6">
                 <t-card class="step-card" size="small" title="基本信息">
                   <t-form-item label="标准编号" name="projectNum">
                     {{ rowData.projectNum  || '暂未分配' }}
                   </t-form-item>
                   <t-form-item label="标准名称" name="projectName">
                     {{rowData.projectName}}
                   </t-form-item>
                   <t-form-item  label="承担单位" >
                     {{rowData.declareDeptName}}
                   </t-form-item>
                   <t-form-item label="标准性质" name="standardProperty">
                     {{rowData.standardPropertyName}}
<!--                     {{rowData.standardProperty | filterByDict(dict.type.standard_property)}}-->
                   </t-form-item>
                   <t-form-item label="标准类别" name="standardCategory">
                     {{rowData.standardCategoryName}}
<!--                     {{ rowData.standardCategory | filterByDict(dict.type.standard_category) }}-->
                   </t-form-item>
                   <t-form-item label="标准体系" name="systemId">
                     {{rowData.systemName}}
<!--                     {{ rowData.systemId | filterByTree(standardSystemOptions) }}-->
                   </t-form-item>
                   <t-form-item  label="关键词" name="keyWord">
                     {{ rowData.keyWord }}
                   </t-form-item>
                   <t-form-item label="联系人姓名" name="linkMan">
                     {{ rowData.linkMan }}
                   </t-form-item>
                   <t-form-item label="联系人电话" name="linkWay">
                     {{ rowData.linkWay }}
                   </t-form-item>
                   <t-form-item label="制定或修改" name="formulateType">
                     {{rowData.formulateTypeName}}
<!--                     {{ rowData.formulateType | filterByDict(dict.type.formulate_type) }}-->
                   </t-form-item>
                   <t-form-item ref="reviseNum" label="被修订标准号" name="reviseNum">
                     {{ rowData.reviseNum }}
                   </t-form-item>
                   <t-form-item label="主管单位" name="manageDeptId">
                     {{ rowData.manageDeptName }}
<!--                     {{ rowData.manageDeptId | filterByTree(deptMenuOptions) }}-->
                   </t-form-item>
                   <t-form-item label="完成时间" name="completeDate">
                     {{ rowData.completeDate }}
                   </t-form-item>
                   <t-form-item label="发布日期" name="publishDate">
                     {{ rowData.publishDate }}
                   </t-form-item>
                   <t-form-item label="实施日期" name="implDate">
                     {{ rowData.implDate }}
                   </t-form-item>
                 </t-card>
               </t-col>
               <t-col :span="6">
                 <t-card class="step-card" size="small" title="采标情况">
                   <t-form-item label="一致性程度" name="consistencyDegree">
                     {{ rowData.consistencyDegree }}
                   </t-form-item>
                   <t-form-item label="国际标准号" name="internationalStandardNum">
                     {{ rowData.internationalStandardNum }}
                   </t-form-item>
                   <t-form-item label="国际标准名称" name="internationalStandardName">
                     {{ rowData.internationalStandardName }}
                   </t-form-item>
                 </t-card>
               </t-col>
             </t-row>
           </t-form>
         </t-tab-panel>
         <t-tab-panel class="tab-panel"  value="2" label="申报说明">
           <t-card class="step-card" size="small" title="申报说明（必要性、可行性及目前此领域国际国内标准情况)">
<!--             <div v-html="rowData.description"></div>-->
             <inner-html :content="rowData.description"></inner-html>

           </t-card>
         </t-tab-panel>
         <t-tab-panel  value="3" label="起草单位">
           <t-form labelWidth="140px" >
             <t-row style="align-items: stretch;">
               <t-col :span="12">
<!--                 <t-card class="step-card" size="small" title="起草单位">-->
                   <standard-company ref="standard-company" v-model="rowData.draftUnits" :editOpen="false"></standard-company>
<!--                 </t-card>-->
               </t-col>
             </t-row>
           </t-form>
         </t-tab-panel>
<!--         <t-tab-panel class="tab-panel" v-if="rowData.draftPersons.length>0"  value="4" label="起草人员 ">-->
<!--           <t-form labelWidth="140px" >-->
<!--             <t-row style="align-items: stretch;">-->
<!--               <t-col :span="12">-->
<!--                 <t-card class="step-card" size="small" title="起草小组成员">-->
<!--                   <member-list v-model="rowData.draftPersons"-->
<!--                                :editOpen="false" ></member-list>-->
<!--                 </t-card>-->
<!--               </t-col>-->
<!--             </t-row>-->
<!--           </t-form>-->
<!--         </t-tab-panel>-->
         <t-tab-panel class="tab-panel"  value="5" label="附件">
           <t-form labelWidth="140px" >
             <t-row style="align-items: stretch;">
               <t-col :span="12">

                   <t-table row-key="id" :columns="projectFileColumns" :data="projectFileData">
                     <template #id="{row, rowIndex}">
                       {{ rowIndex+1 }}
                     </template>
                     <template  #op="{row}">
                       <div v-for="(item,index) in row.fileLists" :key="index">
                         <a class="t-button-link" target="_blank" :href="item.url" >
                           {{item.name}}
                         </a>
                       </div>
                     </template>
                   </t-table>
               </t-col>
             </t-row>
           </t-form>
         </t-tab-panel>
       </t-tabs>
     </div>
    </t-dialog>
  </div>
</template>

<script>
import memberList from "../components/member-list.vue";
import standardCompany from "@/pages/bzh/standard/components/standard-company.vue";
import InnerHtml from "@/components/InnerHtml/index.vue";

export default {
  name: "opinion-yk",
  dicts:["formulate_type", 'standard_property'],
  components: {
    memberList,
    standardCompany,
    InnerHtml
  },
  data() {
    return {
      projectFileColumns: [
        {
          colKey: "id",
          title: "序号",
          align: "center",
          width: 64
        },
        {
          colKey: "c1",
          title: "附件名称",
          align: "center",
        },
        {
          colKey: "c2",
          title: "是否必需",
          align: "center",
        },
        {
          colKey: "op",
          title: "附件列表",
          align: "left",
        },
      ],
      projectFileData: [
        {
          id: 1,
          c1: "立项公文（盖章原件）",
          c2: "是",
          moduleKey: "projectLXGW",
          fileIds: [],
          fileLists: [],
        },
        {
          id: 2,
          c1: "标准草案",
          c2: "是",
          fileIds: [],
          fileLists: [],
          moduleKey: "projectBZCA"
        },
      ],
      value: '1',
      detailVisible: false,
      rules: {
        chapterNum: [
          {
            required: true,
            message: "地方标准章条不能为空",
          },
        ],
        opinion: [
          {
            required: true,
            message: "意见内容不能为空",
          },
        ],
        // dealOpinion: [
        //   {
        //     required: true,
        //     message: "处理意见内容不能为空",
        //   },
        // ],
        personName: [
          {
            required: true,
            message: "您的名字不能为空",
          },
        ],
        deptName: [
          {
            required: true,
            message: "您的单位名不能为空",
          },
        ],
      },
      opinionVisible: false,
      formData: {
        // chapterNum: "",
        // opinion: "",
        // opinionSource: "",
        // dealOpinion: ""
        chapterNum: "",
        opinion: "",
        personName: "",
        deptName: ""
      },
      header: "",
      nowRow:{},
      deleteVisible:false,
      deptMenuOptions:[],
      queryParams:{
        pageNum:1,
        pageSize:10,
      },
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10, 20, 30, 50],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination,pageInfo)
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList()
        },
      },
      rowData: {
        draftPersons: [],
        draftUnits: []
      },
      dialog:{
        objId:"",
        header:"",
        open_detail: false,
      },
      sort:[],
      dataLoading: false,
      columns:[
        {
          colKey: "projectName",
          title: "标准名称",
          align: "center",
          width: 220
        },
        {
          colKey: "standardProperty",
          title: "标准性质",
          align: "center",
          width: 160,
        },
        {
          colKey: "formulateTypeName",
          title: "制定或修订",
          align: "center",
          width: 160,
        },
        {
          colKey: "reviseNum",
          title: "被修订标准号",
          align: "center",
          width: 160,
        },
        {
          colKey: "consistencyDegree",
          title: "一致性程度",
          align: "center",
          width: 160,
        },
        {
          colKey: "internationalStandardNum",
          title: "国际标准号",
          align: "center",
          width: 160,
        },

        {
          colKey: "draftUnitNames",
          title: "主要起草单位",
          align: "center",
          width: 160,
        },
        {
          colKey: "completeDate",
          title: "完成时间",
          align: "center",
          width: 160,
          sorter: true,
        },
        {
          colKey: "op",
          title: "操作",
          align: "center",
          width: 160,
          fixed: 'right'
        },
      ],
      data: []
    }
  },
  async created() {
    await this.getList()
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate().then((validateResult) => {
        if (validateResult === true) {
          this.formData.localId = this.nowRow.id
          this.$api.bzh.opinion.add(this.formData).then(response => {
            this.$refs.form.reset()
            this.$message.success("提交成功")
            this.opinionVisible = false
          }).catch(e => {
            this.$message.error(e.toString())
          })
        } else {
          const firstError = Object.values(validateResult)[0]?.[0]?.message;
          this.$message.error(firstError);
        }
      })
    },
    // 排序
    sortChange(sort){
      this.sort = sort;
      let orderByColumn = []
      let isAsc = []
      if(sort instanceof Array){
        orderByColumn = sort.map(val=>val.sortBy)
        isAsc = sort.map(val=>val.descending?`desc`:`asc`)
      }else {
        orderByColumn = [sort.sortBy]
        isAsc = [sort.descending?`desc`:`asc`]
      }
      this.queryParams.orderByColumn = orderByColumn.join(",")
      this.queryParams.isAsc = isAsc.join(",")
      this.getList();
    },
    // 获取接口数据
    async getList(){
      this.dataLoading = true
      this.queryParams.pageNum = this.pagination.current || 1
      let response = {}
      try {
        // response = await this.$api.bzh.standard.list(this.queryParams)
        // this.queryParams.localStandardStatus = 5
        response = await this.$api.bzh.standard.evaluationList(this.queryParams)
        this.pagination.total = response.total
        this.data = response.rows
        this.dataLoading = false
      }catch (e) {
        this.dataLoading = false
        await this.$message.error(e.toString())
      }
    },
    openDetail(row){
      this.value = "1";
      this.dialog.header=row.projectName;
      this.dialog.objId=row.id;
      this.$api.bzh.standard.detailFortourist(row.id).then(response=>{
        Object.assign(this.rowData, response.data)
        const files = {}
        const sysAttMainEntity = this.rowData.sysAttMainEntity || []
        sysAttMainEntity.forEach((item) => {
          if (!files[item.moduleKey]) {
            files[item.moduleKey] = []
          }
          files[item.moduleKey].push({
            name: item.fileName,
            url: item.fullFilePath,
            id: item.id,
            filePath: item.filePath
          })
        })
        this.projectFileData.forEach((val,index)=>{
          this.projectFileData[index].fileLists = files[val.moduleKey] || [];
          this.projectFileData[index].fileIds = files[val.moduleKey]?.map(val => val.id) || [];
        })
        this.dialog.open_detail = true;
      }).catch(e=>{
        this.$message.error(e.toString())
      })

    }
  }
}
</script>

<style lang="less" scoped>
.query-form-inline{
  display: flex;
  div{
    margin-right: 10px;
  }
}
.base-container{
  height: 100%;
  padding: 0 10px;
}
.t-button-link{
  margin-right: 0px;
}
/deep/ .t-table th{
  font-size: 14px;
  font-weight: 500;
  color: rgb(29, 33, 41);
  background-color: #F2F3F5;
}

.t-tab-panel{
  padding: 10px;
}
.tab-panel{
  height: calc(65vh - 64px);
  overflow: scroll;
}
.t-form__item{
  margin-bottom:6px
}

</style>

